<template>
  <view class="page">
    <Sub-title label="退还内容" :bold="false" padding="20rpx 0 0 0" />
    <view class="r-row">
      <text>
        {{ pay_type == "0" ? "余额：" : pay_type == "1" ? "现金：" : "虚拟币：" }}
      </text>
      <text class="green">
        {{
          pay_type == "3"
            ? `${virtual_coin || 0}币（${refund.price || 0}元）`
            : `${refund.price || 0}元`
        }}（以实际退款{{ pay_type == "3" ? "虚拟币" : "金额" }}为准）
      </text>
    </view>
    <Sub-title label="物流状态" :bold="false" border>
      <view slot="right" @click="expressShow = true">
        <u-input
          v-model="expressType"
          disabled
          disabled-color="#ffffff"
          placeholder="是否收到货"
          font-size="28rpx"
          input-align="right"
          suffix-icon="arrow-right"
          suffix-icon-style="color: #909399"
          :placeholder-style="placeholderStyle"
          border="none"
        />
      </view>
    </Sub-title>
    <Sub-title label="退款类型" :bold="false" border>
      <view slot="right" @click="typeShow = true">
        <u-input
          v-model="type"
          disabled
          disabled-color="#ffffff"
          placeholder="选择退款类型"
          font-size="28rpx"
          input-align="right"
          suffix-icon="arrow-right"
          suffix-icon-style="color: #909399"
          :placeholder-style="placeholderStyle"
          border="none"
        />
      </view>
    </Sub-title>
    <Sub-title label="退款原因" :bold="false" border>
      <view slot="right" @click="reasonShow = true">
        <u-input
          v-model="reason"
          disabled
          disabled-color="#ffffff"
          placeholder="退款的原因"
          font-size="28rpx"
          input-align="right"
          suffix-icon="arrow-right"
          suffix-icon-style="color: #909399"
          :placeholder-style="placeholderStyle"
          border="none"
        />
      </view>
    </Sub-title>
    <Sub-title
      :label="`${pay_type == 3 ? '虚拟币' : '现金'}退还方式`"
      :bold="false"
      padding="20rpx 0 0 0"
    />
    <view class="r-row f-row">
      <text>原路退回：<text class="green">（1-3个工作日内退款到原支付方）</text> </text>
      <view style="justify-content: flex-end">
        <u-radio-group v-model="pay">
          <u-radio activeColor="#3BA199" :name="true" />
        </u-radio-group>
      </view>
    </view>
    <Sub-title label="退款理由" :bold="false" />
    <u-textarea
      v-model="refund.refund_content"
      placeholder="请填写退款理由...."
      border="none"
      height="324rpx"
    />
    <Sub-title label="上传凭证" :bold="false" />
    <u-upload
      :file-list="fileList"
      @after-read="afterRead"
      @delete="deletePic"
      name="images"
      multiple
      :max-count="9"
    />
    <view class="btn">
      <view class="button" @click="handleRefund"> 申请退款</view>
    </view>

    <u-picker
      :show="expressShow"
      :columns="expressList"
      key-name="name"
      close-on-click-overlay
      @close="expressShow = false"
      @cancel="expressShow = false"
      @confirm="expressSelect"
    />
    <u-picker
      :show="typeShow"
      :columns="typeList"
      key-name="name"
      close-on-click-overlay
      @close="typeShow = false"
      @cancel="typeShow = false"
      @confirm="typeSelect"
    />
    <u-picker
      :show="reasonShow"
      :columns="reasonList"
      key-name="name"
      close-on-click-overlay
      @close="reasonShow = false"
      @cancel="reasonShow = false"
      @confirm="reasonSelect"
    />
  </view>
</template>

<script>
import { myRefundDetail, myEditRefund } from "@/request/myApi.js";
import { commonUpload } from "@/request/common.js";
export default {
  data() {
    return {
      refundId: "", // 售后订单ID
      pay_type: "1", // 退款方式
      expressType: "", // 物流状态中文
      type: "", // 退款类型中文
      reason: "", // 退款原因中文
      virtual_coin: "", // 虚拟币数量
      pay: true, // 退还
      refund: {
        order_id: 0, // 订单ID
        order_type: "goods", // 订单类型
        expressType: "", // 物流状态 0未收到货 1已收到货
        type: "", // 退款类型 0我要退款(无需退货) 1退货退款
        reason: "", // 退款原因  0不喜欢 1空包裹 2一直未送达 3颜色/尺码不符 4质量问题 5少件漏发 6假冒品牌
        goods: 0, // 商品ID
        price: 0, // 退款金额
        images: [], // 上传图片
        refund_content: "", // 退款理由
      },
      placeholderStyle: {
        fontSize: "28rpx",
        color: "#D9D9D9",
      },
      expressShow: false, // 物流状态弹窗
      expressList: [
        [
          { name: "未收到货", value: 0 },
          { name: "已收到货", value: 1 },
        ],
      ],
      typeShow: false, // 退款类型弹窗
      typeList: [
        [
          { name: "我要退款(无需退货)", value: 0 },
          { name: "退货退款", value: 1 },
        ],
      ],
      reasonShow: false, // 退款原因弹窗
      reasonList: [
        [
          { name: "不喜欢", value: 0 },
          { name: "空包裹", value: 1 },
          { name: "一直未送达", value: 2 },
          { name: "颜色/尺码不符", value: 3 },
          { name: "质量问题", value: 4 },
          { name: "少件漏发", value: 5 },
          { name: "假冒品牌", value: 6 },
        ],
      ],
      fileList: [], // 凭证列表
    };
  },
  onLoad(e) {
    this.refundId = e.id;
    this.getData();
  },
  methods: {
    // 获取售后订单详情
    getData() {
      myRefundDetail(this.refundId).then((res) => {
        if (res.code == 1) {
          this.refund = res.data;
          this.fileList = res.data.images.map((img) => {
            return {
              status: "success",
              message: "",
              url: img,
            };
          });
          this.pay_type = res.data.pay.pay_type;
          this.expressType = res.data.expressType_text;
          this.type = res.data.type_text;
          this.reason = res.data.reason_text;
          this.virtual_coin = res.data.pay.virtual_coin;
        }
      });
    },
    // 申请退款
    handleRefund() {
      if (this.refund.expressType === "") {
        uni.showToast({
          title: "请选择物流状态",
          icon: "none",
        });
        return false;
      }
      if (this.refund.type === "") {
        uni.showToast({
          title: "请选择退款类型",
          icon: "none",
        });
        return false;
      }
      if (this.refund.reason === "") {
        uni.showToast({
          title: "请选择退款原因",
          icon: "none",
        });
        return false;
      }
      if (!this.refund.refund_content) {
        uni.showToast({
          title: "请填写退款理由",
          icon: "none",
        });
        return false;
      }
      if (this.refund.price <= 0) {
        uni.showModal({
          title: "重要提示",
          content: "你的退款金额可能是零元，可能失去售后机会是否确认",
          success: (action) => {
            if (action.confirm) this.submitApply();
          },
        });
      } else {
        this.submitApply();
      }
    },
    // 提交申请
    submitApply() {
      this.refund.images = this.fileList.map((i) => {
        return i.url;
      });
      let data = {
        id: this.refundId,
        expressType: this.refund.expressType,
        type: this.refund.type,
        reason: this.refund.reason,
        price: this.refund.price,
        images: this.refund.images,
        refund_content: this.refund.refund_content,
      };
      myEditRefund(data).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: "申请已提交",
            icon: "success",
            mask: true,
            success: () => {
              setTimeout(() => {
                this.$prePage().getData();
                uni.navigateBack({ delta: 1 });
              }, 1500);
            },
          });
        }
      });
    },
    // 选择物流状态
    expressSelect(val) {
      this.refund.expressType = val.value[0].value;
      this.expressType = val.value[0].name;
      this.expressShow = false;
    },
    // 选择退款类型
    typeSelect(val) {
      this.refund.type = val.value[0].value;
      this.type = val.value[0].name;
      this.typeShow = false;
    },
    // 选择退款原因
    reasonSelect(val) {
      this.refund.reason = val.value[0].value;
      this.reason = val.value[0].name;
      this.reasonShow = false;
    },
    // 删除凭证图片
    deletePic(e) {
      this.fileList.splice(e.index, 1);
    },
    // 新增图片
    async afterRead(e) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let list = [].concat(e.file);
      let len = this.fileList.length;
      list.map((item) => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < list.length; i++) {
        const result = await this.uploadFilePromise(list[i].url);
        let item = this.fileList[len];
        this.fileList.splice(
          len,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        len++;
      }
    },
    // 上传凭证图片
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        commonUpload(url).then((res) => {
          if (res.code == 1) {
            setTimeout(() => {
              resolve(res.data.fullurl);
            }, 1000);
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  padding-bottom: 186rpx;
  .r-row {
    width: 100%;
    padding: 20rpx 0;
    font-weight: 500;
    border-bottom: 1rpx solid rgba(217, 217, 217, 0.6);
    > text {
      font-size: 28rpx;
      color: #979797;
    }
  }
  .f-row {
    display: flex;
    justify-content: space-between;
  }
  .green {
    color: $active-color !important;
    font-weight: 500;
  }
  /deep/ .u-textarea {
    background-color: #f9fcfc;
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    height: 126rpx;
    padding: 20rpx;
    z-index: 8;
    bottom: 0;
    left: 0;
    right: 0;
    .button {
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: $active-color;
      font-size: 28rpx;
      background-color: #cee7e5;
      border-radius: 100rpx;
      &:active {
        background-color: #b9e4e1;
      }
    }
  }
}
</style>
